<!--
 * @Description: 
 * @Author: zgh
 * @Date: 2023-04-29 10:19:12
 * @FilePath: \web\jichuangwan\index.html
 * @LastEditTime: 2023-05-09 10:53:13
 * @LastEditors: zgh
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>技创玩</title>
    <!-- <link class="style" rel="stylesheet" href="./css/index.css"> -->
    <link rel="stylesheet" href="./fonts/iconfont.css">
    <link class="style" rel="stylesheet" href="./css/index01.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/a11y-dark.min.css">

    <script src="./js/highlight.min.js"></script>

    <script defer src="./js/jquery-3.6.0.js"></script>
    <script defer src="./js/index.js"></script>

    <style>
    </style>
</head>

<body data-sidebar-collapsed="false">
    <div class="main-page">
        <!-- 侧边栏 -->
        <div class="main-side">
            <div class="logo">
                <a href="/">
                    <img src="./imgs/logo.png">
                    <span class="logo-text">技创玩</span>
                </a>
            </div>
            <!-- 隐藏按钮 -->
            <div class="side-toggle">
                <div class="side-button">
                    <svg t="1682925708205" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="3293" width="200" height="200">
                        <path
                            d="M678.685323 121.034611 105.816001 121.034611c-13.995759 0-25.282826 11.343349-25.282826 25.282826l0 75.792197c0 13.995759 11.287067 25.282826 25.282826 25.282826l572.870346 0c13.939477 0 25.282826-11.287067 25.282826-25.282826l0-75.792197C703.96815 132.37796 692.6248 121.034611 678.685323 121.034611"
                            fill="#ffffff" p-id="3294"></path>
                        <path
                            d="M105.798605 559.12632l497.078149 0c13.939477 0 25.282826-11.343349 25.282826-25.282826l0-75.792197c0-13.995759-11.343349-25.282826-25.282826-25.282826L105.798605 432.768471c-13.939477 0-25.282826 11.287067-25.282826 25.282826l0 75.792197C80.515778 547.782971 91.859128 559.12632 105.798605 559.12632"
                            fill="#ffffff" p-id="3295"></path>
                        <path
                            d="M678.685323 744.469586 105.816001 744.469586c-13.995759 0-25.282826 11.343349-25.282826 25.282826l0 75.792197c0 13.995759 11.287067 25.282826 25.282826 25.282826l572.870346 0c13.939477 0 25.282826-11.287067 25.282826-25.282826l0-75.792197C703.96815 755.812935 692.6248 744.469586 678.685323 744.469586"
                            fill="#ffffff" p-id="3296"></path>
                        <path
                            d="M939.871951 317.477678l-210.219839 162.306596c-11.5695 8.747221-10.835789 24.492834 0 33.861202l210.219839 162.306596c11.682064 9.42465 33.861202 4.119831 33.861202-23.985274L973.733153 341.40667C973.733153 307.376623 951.554014 307.432904 939.871951 317.477678"
                            fill="#ffffff" p-id="3297"></path>
                    </svg>
                </div>
                <div class="side-strip"></div>
            </div>
            <!-- 侧边栏列表 -->
            <div class="start">
                <span class="start-text">技术 创意 游戏</span>
                <a href="" class="start-button">
                    <span>快速开始</span>
                </a>
            </div>
            <div class="myhref">
                <a class="link">H5游戏<span class="iconfont icon-youxiyouxiji icon"></span></a>
                <a class="link">创意分享<span class="iconfont icon-program icon"></span></a>
                <a class="link">技术站<span class="iconfont icon-bokeyuan icon"></span></a>
            </div>
            <div class="mytheme">
                <a href="javascript:;" class="mytheme-button">切换主题风格</a>
            </div>
        </div>

        <!-- 主界面 -->
        <div class="search">
            <div class="search-form">
                <form action="">
                    <label class="search-label">
                        <svg viewBox="0 0 56.7 56.7" class="SearchForm-module_iconMag-6hvXX">
                            <path
                                d="M42.8 7.3C33-2.4 17.1-2.4 7.3 7.3c-9.8 9.8-9.8 25.7 0 35.5 8.7 8.7 22.2 9.7 32 2.9l9.6 9.6c1.8 1.8 4.7 1.8 6.4 0 1.8-1.8 1.8-4.7 0-6.4l-9.6-9.6c6.8-9.8 5.8-23.3-2.9-32zm-6.2 29.3c-6.4 6.4-16.7 6.4-23.1 0s-6.4-16.7 0-23.1c6.4-6.4 16.7-6.4 23.1 0 6.4 6.4 6.4 16.8 0 23.1z">
                            </path>
                        </svg>
                        <input type="search" class="search-input" placeholder="搜索游戏……">
                    </label>
                </form>
            </div>
            <div class="user-button">
                <a href="/" class="button sign">注册</a>
                <a href="/" class="button login">登录</a>
            </div>
        </div>
        <!-- 下拉列表 -->
        <div class="xiala">
            <a class="xiala-button">
                <span class="iconfont icon-wxbzhuye"></span>
                主页
            </a>
            <a class="xiala-button current">
                <span class="iconfont icon-youxiyouxiji current"></span>
                游戏
            </a>
            <a class="xiala-button">
                <span class="iconfont icon-program"></span>
                创意
            </a>
            <a class="xiala-button">
                <span class="iconfont icon-bokeyuan"></span>
                博客
            </a>
        </div>

        <!-- 主页面头部 -->
        <header class="home-header">
            <div class="wrapper">
                <!-- 文本区域 -->
                <div class="info">
                    <div class="text">
                        <h1>体验游戏，分享创意与技术交流</h1>
                        <p>技创玩是一个<strong>专注h5游戏，分享创意，交流技术</strong>的平台。游戏、创意、技术通过超链接紧密联系。可以构建和部署创意demo，从已有的案例寻找灵感，阅读技术博文来学习与实践，最终展示自己的游戏作品。
                        </p>
                        <a href="/" class="button sign">立即注册</a>
                    </div>
                    <a href="#teacher" class="speed-teacher">
                        <div class="huojian">
                            <svg t="1683881640615" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="3935" width="66" height="66">
                                <path
                                    d="M511.998 360.649c-41.727 0-75.676 33.949-75.676 75.676S470.271 512 511.998 512s75.676-33.949 75.676-75.676-33.949-75.675-75.676-75.675z m0 94.594c-10.434 0-18.919-8.49-18.919-18.919s8.485-18.919 18.919-18.919c10.434 0 18.919 8.49 18.919 18.919 0 10.43-8.485 18.919-18.919 18.919z"
                                    fill="#ffffff" p-id="3936"></path>
                                <path
                                    d="M717.441 580.327v-85.385c0-78.022-22.374-134.936-64.701-200.367-28.166-43.538-64.267-80.78-106.054-110.41-11.182-7.926-22.706-15.385-34.688-22.166-11.977 6.781-23.501 14.24-34.683 22.166-41.787 29.63-77.888 66.872-106.054 110.41-42.327 65.431-64.701 122.345-64.701 200.367v85.385l-37.353 75.195v87.066h485.587v-87.066l-37.353-75.195z m-19.404 105.504H325.963v-6.808l37.353-75.195V494.942c0-67.057 19.228-113.31 55.597-169.54 24.651-38.101 56.327-70.613 93.084-96.262 36.757 25.649 68.438 58.161 93.089 96.262 36.369 56.23 55.597 102.484 55.597 169.54v108.885l37.353 75.195v6.809zM512.002 799.165c-22.425-11.455-36.803-25.318-53.916-41.219h-80.692c35.565 41.364 72.105 75.075 122.673 98.521L512.002 862l11.935-5.533c50.563-23.445 87.098-57.154 122.664-98.521h-80.683c-17.112 15.9-31.491 29.764-53.916 41.219z"
                                    fill="#ffffff" p-id="3937"></path>
                            </svg>
                        </div>
                        <div class="speed-teacher-context">
                            <h2>快进到教程</h2>
                            <p>一腔热血却不知何从下手？快快点击传送</p>
                        </div>
                    </a>
                </div>
                <!-- 代码秀 -->
                <div class="code-show">
                    <div class="code-bg"></div>
                    <div class="code html-show">
                        <header>
                            <svg t="1683713385365" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="1479" width="16" height="16">
                                <path
                                    d="M928.033333 591.146667A85.006667 85.006667 0 0 1 874.666667 512v-0.666667a84.993333 84.993333 0 0 1 53.233333-79.226666c25.666667-10.433333 39.013333-39.333333 30.373333-65.813334a468.593333 468.593333 0 0 0-28.486666-68.34A53.333333 53.333333 0 0 0 861.54 273.333333a85.373333 85.373333 0 0 1-111.88-111.833333c10.766667-25.506667-0.206667-55.373333-24.98-68a467.686667 467.686667 0 0 0-68.38-28.22c-26.5-8.553333-55.366667 4.88-65.713333 30.58A85.013333 85.013333 0 0 1 511.54 149.333333h-0.14a85.04 85.04 0 0 1-79.113333-53.286666c-10.406667-25.666667-39.293333-39.013333-65.753334-30.393334a467.12 467.12 0 0 0-68.333333 28.44c-24.74 12.666667-35.633333 42.573333-24.8 68.053334a85.333333 85.333333 0 0 1-78.52 118.753333 84.973333 84.973333 0 0 1-33.02-6.62 53.446667 53.446667 0 0 0-38.893333-1.013333 52.886667 52.886667 0 0 0-29.333334 25.82A468.933333 468.933333 0 0 0 65.333333 367.5c-8.56 26.493333 4.86 55.333333 30.553334 65.726667a85.333333 85.333333 0 0 1 0.133333 158.286666c-25.673333 10.406667-39.04 39.333333-30.426667 65.786667A467.7 467.7 0 0 0 94 725.613333a53.48 53.48 0 0 0 47.54 29 52.36 52.36 0 0 0 20.5-4.166666 85.333333 85.333333 0 0 1 112 111.84c-10.793333 25.5 0.16 55.373333 24.92 68A467.833333 467.833333 0 0 0 367.333333 958.593333a52.986667 52.986667 0 0 0 16.353334 2.586667c21.16 0 41.133333-12.666667 49.386666-33.106667A85.006667 85.006667 0 0 1 512.16 874.666667h0.04a85.02 85.02 0 0 1 79.133333 53.333333c10.393333 25.686667 39.28 39.073333 65.766667 30.466667a468.153333 468.153333 0 0 0 68.326667-28.366667c24.753333-12.666667 35.673333-42.54 24.86-68.033333a85.006667 85.006667 0 0 1 18.213333-93.68l0.28-0.28a85.013333 85.013333 0 0 1 93.4-18c25.493333 10.8 55.333333-0.133333 68-24.893334a468 468 0 0 0 28.326667-68.333333c8.613333-26.466667-4.78-55.353333-30.473334-65.733333zM640 512c0 70.58-57.42 128-128 128s-128-57.42-128-128 57.42-128 128-128 128 57.42 128 128z"
                                    fill="#5C5C66" p-id="1480"></path>
                            </svg>
                            <h1>HTML</h1>
                            <svg t="1683713887165" class="icon" viewBox="0 0 1026 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="2299" width="16" height="16">
                                <path
                                    d="M857.088 224.256q28.672-28.672 69.12-28.672t69.12 28.672q29.696 28.672 29.696 68.608t-29.696 68.608l-382.976 380.928q-12.288 14.336-30.72 19.968t-38.912 4.608-40.448-8.704-34.304-22.016l-376.832-374.784q-29.696-28.672-29.696-68.608t29.696-68.608q14.336-14.336 32.256-21.504t36.864-7.168 37.376 7.168 32.768 21.504l313.344 309.248z"
                                    p-id="2300" fill="#8a8a8a"></path>
                            </svg>
                        </header>
                        <div class="code-content">
                            <code>
                                <span class="HomepageAnonHeaderHero_cr-aN2bn">&lt;div</span> <span class="HomepageAnonHeaderHero_cy-JVLez">class</span><span>=</span><span class="HomepageAnonHeaderHero_cg-49xQf">"rect"</span><span class="HomepageAnonHeaderHero_cr-aN2bn">&gt;&lt;/div&gt;</span>
                            </code>
                        </div>
                    </div>
                    <div class="code css-show">
                        <header>
                            <svg t="1683713385365" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="1479" width="16" height="16">
                                <path
                                    d="M928.033333 591.146667A85.006667 85.006667 0 0 1 874.666667 512v-0.666667a84.993333 84.993333 0 0 1 53.233333-79.226666c25.666667-10.433333 39.013333-39.333333 30.373333-65.813334a468.593333 468.593333 0 0 0-28.486666-68.34A53.333333 53.333333 0 0 0 861.54 273.333333a85.373333 85.373333 0 0 1-111.88-111.833333c10.766667-25.506667-0.206667-55.373333-24.98-68a467.686667 467.686667 0 0 0-68.38-28.22c-26.5-8.553333-55.366667 4.88-65.713333 30.58A85.013333 85.013333 0 0 1 511.54 149.333333h-0.14a85.04 85.04 0 0 1-79.113333-53.286666c-10.406667-25.666667-39.293333-39.013333-65.753334-30.393334a467.12 467.12 0 0 0-68.333333 28.44c-24.74 12.666667-35.633333 42.573333-24.8 68.053334a85.333333 85.333333 0 0 1-78.52 118.753333 84.973333 84.973333 0 0 1-33.02-6.62 53.446667 53.446667 0 0 0-38.893333-1.013333 52.886667 52.886667 0 0 0-29.333334 25.82A468.933333 468.933333 0 0 0 65.333333 367.5c-8.56 26.493333 4.86 55.333333 30.553334 65.726667a85.333333 85.333333 0 0 1 0.133333 158.286666c-25.673333 10.406667-39.04 39.333333-30.426667 65.786667A467.7 467.7 0 0 0 94 725.613333a53.48 53.48 0 0 0 47.54 29 52.36 52.36 0 0 0 20.5-4.166666 85.333333 85.333333 0 0 1 112 111.84c-10.793333 25.5 0.16 55.373333 24.92 68A467.833333 467.833333 0 0 0 367.333333 958.593333a52.986667 52.986667 0 0 0 16.353334 2.586667c21.16 0 41.133333-12.666667 49.386666-33.106667A85.006667 85.006667 0 0 1 512.16 874.666667h0.04a85.02 85.02 0 0 1 79.133333 53.333333c10.393333 25.686667 39.28 39.073333 65.766667 30.466667a468.153333 468.153333 0 0 0 68.326667-28.366667c24.753333-12.666667 35.673333-42.54 24.86-68.033333a85.006667 85.006667 0 0 1 18.213333-93.68l0.28-0.28a85.013333 85.013333 0 0 1 93.4-18c25.493333 10.8 55.333333-0.133333 68-24.893334a468 468 0 0 0 28.326667-68.333333c8.613333-26.466667-4.78-55.353333-30.473334-65.733333zM640 512c0 70.58-57.42 128-128 128s-128-57.42-128-128 57.42-128 128-128 128 57.42 128 128z"
                                    fill="#5C5C66" p-id="1480"></path>
                            </svg>
                            <h1>SCSS</h1>
                            <svg t="1683713887165" class="icon" viewBox="0 0 1026 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="2299" width="16" height="16">
                                <path
                                    d="M857.088 224.256q28.672-28.672 69.12-28.672t69.12 28.672q29.696 28.672 29.696 68.608t-29.696 68.608l-382.976 380.928q-12.288 14.336-30.72 19.968t-38.912 4.608-40.448-8.704-34.304-22.016l-376.832-374.784q-29.696-28.672-29.696-68.608t29.696-68.608q14.336-14.336 32.256-21.504t36.864-7.168 37.376 7.168 32.768 21.504l313.344 309.248z"
                                    p-id="2300" fill="#8a8a8a"></path>
                            </svg>
                        </header>
                        <div class="code-content">
                            <code>
                                <p class="HomepageAnonHeaderHero_line1-r+tWR"><span class="HomepageAnonHeaderHero_cy-JVLez">.rect</span> <span>{</span></p><br><p class="HomepageAnonHeaderHero_line2-j1x2U"><span class="HomepageAnonHeaderHero_cp-23ozZ">background</span><span>:</span> <span class="HomepageAnonHeaderHero_cy-JVLez">linear-gradient</span>(</p><br><p class="HomepageAnonHeaderHero_line3-pAv+x"><span class="HomepageAnonHeaderHero_co-+ACpm">-119deg</span>,</p><br><p class="HomepageAnonHeaderHero_line4-wTffx"><span class="HomepageAnonHeaderHero_cy-JVLez">$gray</span> <span class="HomepageAnonHeaderHero_co-+ACpm">0%</span>,</p><br><p class="HomepageAnonHeaderHero_line5-b+wBt"><span class="HomepageAnonHeaderHero_cy-JVLez">$dark-gray</span> <span class="HomepageAnonHeaderHero_co-+ACpm">100%</span>); }</p>
                        </code>
                        </div>
                    </div>
                    <div class="code js-show">
                        <header>
                            <svg t="1683713385365" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="1479" width="16" height="16">
                                <path
                                    d="M928.033333 591.146667A85.006667 85.006667 0 0 1 874.666667 512v-0.666667a84.993333 84.993333 0 0 1 53.233333-79.226666c25.666667-10.433333 39.013333-39.333333 30.373333-65.813334a468.593333 468.593333 0 0 0-28.486666-68.34A53.333333 53.333333 0 0 0 861.54 273.333333a85.373333 85.373333 0 0 1-111.88-111.833333c10.766667-25.506667-0.206667-55.373333-24.98-68a467.686667 467.686667 0 0 0-68.38-28.22c-26.5-8.553333-55.366667 4.88-65.713333 30.58A85.013333 85.013333 0 0 1 511.54 149.333333h-0.14a85.04 85.04 0 0 1-79.113333-53.286666c-10.406667-25.666667-39.293333-39.013333-65.753334-30.393334a467.12 467.12 0 0 0-68.333333 28.44c-24.74 12.666667-35.633333 42.573333-24.8 68.053334a85.333333 85.333333 0 0 1-78.52 118.753333 84.973333 84.973333 0 0 1-33.02-6.62 53.446667 53.446667 0 0 0-38.893333-1.013333 52.886667 52.886667 0 0 0-29.333334 25.82A468.933333 468.933333 0 0 0 65.333333 367.5c-8.56 26.493333 4.86 55.333333 30.553334 65.726667a85.333333 85.333333 0 0 1 0.133333 158.286666c-25.673333 10.406667-39.04 39.333333-30.426667 65.786667A467.7 467.7 0 0 0 94 725.613333a53.48 53.48 0 0 0 47.54 29 52.36 52.36 0 0 0 20.5-4.166666 85.333333 85.333333 0 0 1 112 111.84c-10.793333 25.5 0.16 55.373333 24.92 68A467.833333 467.833333 0 0 0 367.333333 958.593333a52.986667 52.986667 0 0 0 16.353334 2.586667c21.16 0 41.133333-12.666667 49.386666-33.106667A85.006667 85.006667 0 0 1 512.16 874.666667h0.04a85.02 85.02 0 0 1 79.133333 53.333333c10.393333 25.686667 39.28 39.073333 65.766667 30.466667a468.153333 468.153333 0 0 0 68.326667-28.366667c24.753333-12.666667 35.673333-42.54 24.86-68.033333a85.006667 85.006667 0 0 1 18.213333-93.68l0.28-0.28a85.013333 85.013333 0 0 1 93.4-18c25.493333 10.8 55.333333-0.133333 68-24.893334a468 468 0 0 0 28.326667-68.333333c8.613333-26.466667-4.78-55.353333-30.473334-65.733333zM640 512c0 70.58-57.42 128-128 128s-128-57.42-128-128 57.42-128 128-128 128 57.42 128 128z"
                                    fill="#5C5C66" p-id="1480"></path>
                            </svg>
                            <h1>JS</h1>
                            <svg t="1683713887165" class="icon" viewBox="0 0 1026 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="2299" width="16" height="16">
                                <path
                                    d="M857.088 224.256q28.672-28.672 69.12-28.672t69.12 28.672q29.696 28.672 29.696 68.608t-29.696 68.608l-382.976 380.928q-12.288 14.336-30.72 19.968t-38.912 4.608-40.448-8.704-34.304-22.016l-376.832-374.784q-29.696-28.672-29.696-68.608t29.696-68.608q14.336-14.336 32.256-21.504t36.864-7.168 37.376 7.168 32.768 21.504l313.344 309.248z"
                                    p-id="2300" fill="#8a8a8a"></path>
                            </svg>
                        </header>
                        <div class="code-content">
                            <code>
                                <code><span class="HomepageAnonHeaderHero_cy-JVLez">var</span> <span class="HomepageAnonHeaderHero_cb--MbF+">colors</span> = [<span class="HomepageAnonHeaderHero_cg-49xQf">"#74B087"</span>,<span class="HomepageAnonHeaderHero_cg-49xQf">"#DE7300"</span>,<span class="HomepageAnonHeaderHero_cg-49xQf">"#74B087"</span>];<br><br><span class="HomepageAnonHeaderHero_cc-Zftdz"></span><br><span class="HomepageAnonHeaderHero_cy-JVLez">function</span> <span class="HomepageAnonHeaderHero_cb--MbF+">animate</span>() {};</code>
                            </code>
                        </div>
                    </div>
                </div>
                <!-- 右下角背景图片 -->
                <img src="https://cpwebassets.codepen.io/assets/packs/lines-2-4e66616a5ef291c3566a7ddfe1ffaaa8.svg"
                    alt="" class="img-bg">
            </div>

        </header>

        <!-- 主体部分 -->
        <section class="home-content">
            <!-- 快捷卡片 -->
            <div class="three-card wrapper">
                <div class="card">
                    <div class="card-icon">
                        <span class="iconfont icon-youxiyouxiji"></span>
                    </div>
                    <h2>展示游戏</h2>
                    <p>上传H5游戏，在网页上直接游玩，同时游玩别人的游戏，来理解它们是如何实现的，从而提升自己的开发能力。</p>
                    <a href="" class="button login">
                        <span>上传游戏</span>
                    </a>
                </div>
                <div class="card">
                    <div class="card-icon">
                        <span class="iconfont icon-program"></span>
                    </div>
                    <h2>分享创意</h2>
                    <p>通过在线的编辑器来测试前端代码，记录每个小创意，或者游览别人的创意来获取启发。</p>
                    <a href="" class="button login">
                        <span>打开编辑器</span>
                    </a>
                </div>
                <div class="card">
                    <div class="card-icon">
                        <span class="iconfont icon-bokeyuan"></span>
                    </div>
                    <h2>技术交流</h2>
                    <p>查看别人的技术博文来学习前端技巧。您可以留言与作者交流实现思路，同时可以将博文链接到创意或者游戏中，记录自己的实现过程。</p>
                    <a href="" class="button login">
                        <span>编写博文</span>
                    </a>
                </div>
                <!-- 左下角图片 -->
                <img src="https://cpwebassets.codepen.io/assets/packs/lines-4-4ea88270d73b7f6eaaa69e91aed97ddf.svg"
                    alt="" class="img-bg">
            </div>


            <!-- 创意展示 -->
            <div class="wrapper">
                <div class="idea">
                    <div>
                        <h2>从其他人的创意里汲取灵感</h2>
                        <p>作为前端开发人员，游览或分享作品</p>
                    </div>
                    <article class="idea-main clearfix">
                        <div class="zhezhao"></div>
                        <div class="idea-project">
                            <div class="idea-project-content">
                                <img src="https://assets.codepen.io/406785/internal/screenshots/pens/WNayxdb.custom.png?version=1683874573"
                                    alt="🌙 css syle queries - modern css" loading="lazy">
                                <iframe src="https://animpen.com/run/pen/JKfmKf?p=home" frameborder="0"
                                    title="threejs 实现烟雾特效2.0" loading='lazy' scrolling='no'></iframe>
                                <a href="" class="fugai"></a>
                                <a href="javascript:;" class="href-model">
                                    <button onclick='showModel()'>
                                        <svg t="1684126335883" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                            xmlns="http://www.w3.org/2000/svg" p-id="2004" width="16" height="16">
                                            <path
                                                d="M661.333333 384a21.333333 21.333333 0 0 1-15.086666-36.42L865.833333 128H746.666667a21.333333 21.333333 0 0 1 0-42.666667h170.926666a21.286667 21.286667 0 0 1 14.566667 6l0.486667 0.486667a21.286667 21.286667 0 0 1 6 14.566667V277.333333a21.333333 21.333333 0 0 1-42.666667 0V158.166667l-219.56 219.586666A21.266667 21.266667 0 0 1 661.333333 384z m256.233334 554.666667a21.286667 21.286667 0 0 0 14.566666-6l0.486667-0.486667a21.286667 21.286667 0 0 0 6-14.566667V746.666667a21.333333 21.333333 0 0 0-42.666667 0v119.166666l-219.533333-219.586666a21.333333 21.333333 0 0 0-30.173333 30.173333L865.833333 896H746.666667a21.333333 21.333333 0 0 0 0 42.666667h170.9zM377.753333 377.753333a21.333333 21.333333 0 0 0 0-30.173333L158.166667 128H277.333333a21.333333 21.333333 0 0 0 0-42.666667H106.406667a21.286667 21.286667 0 0 0-14.566667 6l-0.486667 0.486667a21.286667 21.286667 0 0 0-6 14.566667V277.333333a21.333333 21.333333 0 0 0 42.666667 0V158.166667l219.56 219.586666a21.333333 21.333333 0 0 0 30.173333 0zM106.666667 938.666667h170.666666a21.333333 21.333333 0 0 0 0-42.666667H158.166667l219.586666-219.58a21.333333 21.333333 0 0 0-30.173333-30.173333L128 865.833333V746.666667a21.333333 21.333333 0 0 0-42.666667 0v170.926666a21.286667 21.286667 0 0 0 6 14.566667l0.486667 0.486667a21.286667 21.286667 0 0 0 14.566667 6h0.28z"
                                                fill="#dbdbdb" p-id="2005"></path>
                                        </svg> </button>
                                </a>
                            </div>
                        </div>
                        <div class="idea-title">
                            <header>
                                <a href="">
                                    <img
                                        src="https://assets.codepen.io/406785/internal/avatars/users/default.png?fit=crop&format=auto&height=80&version=1652335349&width=80">
                                </a>
                                <div class="idea-title-h">
                                    <a href="">
                                        <h2>js实现3d轮播</h2>
                                    </a>
                                    <address class="idea-user">
                                        <a href="">时侍</a>
                                        <span>2022-12-07 15:32:18</span>
                                    </address>
                                </div>
                            </header>
                            <footer>
                                <buttom class="love coment button">
                                    <svg t="1684114185946" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="1499" width="16" height="16">
                                        <path
                                            d="M32 407.584A279.584 279.584 0 0 1 512 212.64a279.584 279.584 0 0 1 480 194.944 278.144 278.144 0 0 1-113.024 224.512L562.592 892.8a96 96 0 0 1-124.416-1.952L130.016 620.16A278.976 278.976 0 0 1 32 407.584z"
                                            p-id="1500" fill="#ffffff"></path>
                                    </svg>
                                    <span>2</span>
                                </buttom>
                                <div class="coment button">
                                    <svg t="1684133383465" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="4171" width="16" height="16">
                                        <path
                                            d="M337.36192 914.688c-3.5584 0-7.13728-0.75776-10.496-2.304-8.89856-4.096-14.61248-12.99968-14.61248-22.8096L312.25344 782.5408c0-13.29152-10.81344-24.09984-24.12544-24.09984l-122.88 0c-41.00096 0-74.35264-33.3568-74.35264-74.33216L90.89536 235.6992c0-40.9856 33.35168-74.33728 74.35264-74.33728l708.80768 0c40.97536 0 74.32704 33.35168 74.32704 74.33728l0 448.41472c0 40.97536-33.35168 74.33216-74.32704 74.33216l-336.19968 0c-5.76 0-11.35104 2.048-15.73888 5.8368l-168.41728 144.3584C349.06112 912.62464 343.24992 914.688 337.36192 914.688z"
                                            fill="#ffffff" p-id="4172"></path>
                                    </svg>
                                    <span>2</span>
                                </div>
                                <div class="coment button">
                                    <svg t="1684134004601" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="4990" width="16" height="16">
                                        <path
                                            d="M512 188.2c-266.7 0-482.9 145-482.9 323.8S245.3 835.8 512 835.8s482.9-145 482.9-323.8S778.7 188.2 512 188.2z m0 545.4c-122.4 0-221.6-99.2-221.6-221.6 0-122.4 99.2-221.6 221.6-221.6S733.6 389.6 733.6 512c0 122.4-99.2 221.6-221.6 221.6z"
                                            p-id="4991" fill="#ffffff"></path>
                                        <path d="M512 512m-136.3 0a136.3 136.3 0 1 0 272.6 0 136.3 136.3 0 1 0-272.6 0Z"
                                            p-id="4992" fill="#ffffff"></path>
                                    </svg>
                                    <span>2</span>
                                </div>
                            </footer>
                        </div>
                    </article>
                    <article class="idea-main clearfix">
                        <div class="zhezhao"></div>
                        <div class="idea-project">
                            <div class="idea-project-content">
                                <img src="https://assets.codepen.io/406785/internal/screenshots/pens/WNayxdb.custom.png?version=1683874573"
                                    alt="🌙 css syle queries - modern css" loading="lazy">
                                <iframe src="https://animpen.com/run/pen/JKfmKf?p=home" frameborder="0"
                                    title="threejs 实现烟雾特效2.0" loading='lazy' scrolling='no'></iframe>
                                <a href="" class="fugai"></a>
                                <a href="javascript:;" class="href-model">
                                    <button>
                                        <svg t="1684126335883" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                            xmlns="http://www.w3.org/2000/svg" p-id="2004" width="16" height="16">
                                            <path
                                                d="M661.333333 384a21.333333 21.333333 0 0 1-15.086666-36.42L865.833333 128H746.666667a21.333333 21.333333 0 0 1 0-42.666667h170.926666a21.286667 21.286667 0 0 1 14.566667 6l0.486667 0.486667a21.286667 21.286667 0 0 1 6 14.566667V277.333333a21.333333 21.333333 0 0 1-42.666667 0V158.166667l-219.56 219.586666A21.266667 21.266667 0 0 1 661.333333 384z m256.233334 554.666667a21.286667 21.286667 0 0 0 14.566666-6l0.486667-0.486667a21.286667 21.286667 0 0 0 6-14.566667V746.666667a21.333333 21.333333 0 0 0-42.666667 0v119.166666l-219.533333-219.586666a21.333333 21.333333 0 0 0-30.173333 30.173333L865.833333 896H746.666667a21.333333 21.333333 0 0 0 0 42.666667h170.9zM377.753333 377.753333a21.333333 21.333333 0 0 0 0-30.173333L158.166667 128H277.333333a21.333333 21.333333 0 0 0 0-42.666667H106.406667a21.286667 21.286667 0 0 0-14.566667 6l-0.486667 0.486667a21.286667 21.286667 0 0 0-6 14.566667V277.333333a21.333333 21.333333 0 0 0 42.666667 0V158.166667l219.56 219.586666a21.333333 21.333333 0 0 0 30.173333 0zM106.666667 938.666667h170.666666a21.333333 21.333333 0 0 0 0-42.666667H158.166667l219.586666-219.58a21.333333 21.333333 0 0 0-30.173333-30.173333L128 865.833333V746.666667a21.333333 21.333333 0 0 0-42.666667 0v170.926666a21.286667 21.286667 0 0 0 6 14.566667l0.486667 0.486667a21.286667 21.286667 0 0 0 14.566667 6h0.28z"
                                                fill="#dbdbdb" p-id="2005"></path>
                                        </svg> </button>
                                </a>
                            </div>
                        </div>
                        <div class="idea-title">
                            <header>
                                <a href="">
                                    <img
                                        src="https://assets.codepen.io/406785/internal/avatars/users/default.png?fit=crop&format=auto&height=80&version=1652335349&width=80">
                                </a>
                                <div class="idea-title-h">
                                    <a href="">
                                        <h2>js实现3d轮播</h2>
                                    </a>
                                    <address class="idea-user">
                                        <a href="">时侍</a>
                                        <span>2022-12-07 15:32:18</span>
                                    </address>
                                </div>
                            </header>
                            <footer>
                                <buttom class="love coment button">
                                    <svg t="1684114185946" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="1499" width="16" height="16">
                                        <path
                                            d="M32 407.584A279.584 279.584 0 0 1 512 212.64a279.584 279.584 0 0 1 480 194.944 278.144 278.144 0 0 1-113.024 224.512L562.592 892.8a96 96 0 0 1-124.416-1.952L130.016 620.16A278.976 278.976 0 0 1 32 407.584z"
                                            p-id="1500" fill="#ffffff"></path>
                                    </svg>
                                    <span>2</span>
                                </buttom>
                                <div class="coment button">
                                    <svg t="1684133383465" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="4171" width="16" height="16">
                                        <path
                                            d="M337.36192 914.688c-3.5584 0-7.13728-0.75776-10.496-2.304-8.89856-4.096-14.61248-12.99968-14.61248-22.8096L312.25344 782.5408c0-13.29152-10.81344-24.09984-24.12544-24.09984l-122.88 0c-41.00096 0-74.35264-33.3568-74.35264-74.33216L90.89536 235.6992c0-40.9856 33.35168-74.33728 74.35264-74.33728l708.80768 0c40.97536 0 74.32704 33.35168 74.32704 74.33728l0 448.41472c0 40.97536-33.35168 74.33216-74.32704 74.33216l-336.19968 0c-5.76 0-11.35104 2.048-15.73888 5.8368l-168.41728 144.3584C349.06112 912.62464 343.24992 914.688 337.36192 914.688z"
                                            fill="#ffffff" p-id="4172"></path>
                                    </svg>
                                    <span>2</span>
                                </div>
                                <div class="coment button">
                                    <svg t="1684134004601" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="4990" width="16" height="16">
                                        <path
                                            d="M512 188.2c-266.7 0-482.9 145-482.9 323.8S245.3 835.8 512 835.8s482.9-145 482.9-323.8S778.7 188.2 512 188.2z m0 545.4c-122.4 0-221.6-99.2-221.6-221.6 0-122.4 99.2-221.6 221.6-221.6S733.6 389.6 733.6 512c0 122.4-99.2 221.6-221.6 221.6z"
                                            p-id="4991" fill="#ffffff"></path>
                                        <path d="M512 512m-136.3 0a136.3 136.3 0 1 0 272.6 0 136.3 136.3 0 1 0-272.6 0Z"
                                            p-id="4992" fill="#ffffff"></path>
                                    </svg>
                                    <span>2</span>
                                </div>
                            </footer>
                        </div>
                    </article>
                    <article class="idea-main clearfix">
                        <div class="zhezhao"></div>
                        <div class="idea-project">
                            <div class="idea-project-content">
                                <img src="https://assets.codepen.io/406785/internal/screenshots/pens/WNayxdb.custom.png?version=1683874573"
                                    alt="🌙 css syle queries - modern css" loading="lazy">
                                <iframe src="https://animpen.com/run/pen/JKfmKf?p=home" frameborder="0"
                                    title="threejs 实现烟雾特效2.0" loading='lazy' scrolling='no'></iframe>
                                <a href="" class="fugai"></a>
                                <a href="javascript:;" class="href-model">
                                    <button>
                                        <svg t="1684126335883" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                            xmlns="http://www.w3.org/2000/svg" p-id="2004" width="16" height="16">
                                            <path
                                                d="M661.333333 384a21.333333 21.333333 0 0 1-15.086666-36.42L865.833333 128H746.666667a21.333333 21.333333 0 0 1 0-42.666667h170.926666a21.286667 21.286667 0 0 1 14.566667 6l0.486667 0.486667a21.286667 21.286667 0 0 1 6 14.566667V277.333333a21.333333 21.333333 0 0 1-42.666667 0V158.166667l-219.56 219.586666A21.266667 21.266667 0 0 1 661.333333 384z m256.233334 554.666667a21.286667 21.286667 0 0 0 14.566666-6l0.486667-0.486667a21.286667 21.286667 0 0 0 6-14.566667V746.666667a21.333333 21.333333 0 0 0-42.666667 0v119.166666l-219.533333-219.586666a21.333333 21.333333 0 0 0-30.173333 30.173333L865.833333 896H746.666667a21.333333 21.333333 0 0 0 0 42.666667h170.9zM377.753333 377.753333a21.333333 21.333333 0 0 0 0-30.173333L158.166667 128H277.333333a21.333333 21.333333 0 0 0 0-42.666667H106.406667a21.286667 21.286667 0 0 0-14.566667 6l-0.486667 0.486667a21.286667 21.286667 0 0 0-6 14.566667V277.333333a21.333333 21.333333 0 0 0 42.666667 0V158.166667l219.56 219.586666a21.333333 21.333333 0 0 0 30.173333 0zM106.666667 938.666667h170.666666a21.333333 21.333333 0 0 0 0-42.666667H158.166667l219.586666-219.58a21.333333 21.333333 0 0 0-30.173333-30.173333L128 865.833333V746.666667a21.333333 21.333333 0 0 0-42.666667 0v170.926666a21.286667 21.286667 0 0 0 6 14.566667l0.486667 0.486667a21.286667 21.286667 0 0 0 14.566667 6h0.28z"
                                                fill="#dbdbdb" p-id="2005"></path>
                                        </svg> </button>
                                </a>
                            </div>
                        </div>
                        <div class="idea-title">
                            <header>
                                <a href="">
                                    <img
                                        src="https://assets.codepen.io/406785/internal/avatars/users/default.png?fit=crop&format=auto&height=80&version=1652335349&width=80">
                                </a>
                                <div class="idea-title-h">
                                    <a href="">
                                        <h2>js实现3d轮播</h2>
                                    </a>
                                    <address class="idea-user">
                                        <a href="">时侍</a>
                                        <span>2022-12-07 15:32:18</span>
                                    </address>
                                </div>
                            </header>
                            <footer>
                                <buttom class="love coment button">
                                    <svg t="1684114185946" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="1499" width="16" height="16">
                                        <path
                                            d="M32 407.584A279.584 279.584 0 0 1 512 212.64a279.584 279.584 0 0 1 480 194.944 278.144 278.144 0 0 1-113.024 224.512L562.592 892.8a96 96 0 0 1-124.416-1.952L130.016 620.16A278.976 278.976 0 0 1 32 407.584z"
                                            p-id="1500" fill="#ffffff"></path>
                                    </svg>
                                    <span>2</span>
                                </buttom>
                                <div class="coment button">
                                    <svg t="1684133383465" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="4171" width="16" height="16">
                                        <path
                                            d="M337.36192 914.688c-3.5584 0-7.13728-0.75776-10.496-2.304-8.89856-4.096-14.61248-12.99968-14.61248-22.8096L312.25344 782.5408c0-13.29152-10.81344-24.09984-24.12544-24.09984l-122.88 0c-41.00096 0-74.35264-33.3568-74.35264-74.33216L90.89536 235.6992c0-40.9856 33.35168-74.33728 74.35264-74.33728l708.80768 0c40.97536 0 74.32704 33.35168 74.32704 74.33728l0 448.41472c0 40.97536-33.35168 74.33216-74.32704 74.33216l-336.19968 0c-5.76 0-11.35104 2.048-15.73888 5.8368l-168.41728 144.3584C349.06112 912.62464 343.24992 914.688 337.36192 914.688z"
                                            fill="#ffffff" p-id="4172"></path>
                                    </svg>
                                    <span>2</span>
                                </div>
                                <div class="coment button">
                                    <svg t="1684134004601" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="4990" width="16" height="16">
                                        <path
                                            d="M512 188.2c-266.7 0-482.9 145-482.9 323.8S245.3 835.8 512 835.8s482.9-145 482.9-323.8S778.7 188.2 512 188.2z m0 545.4c-122.4 0-221.6-99.2-221.6-221.6 0-122.4 99.2-221.6 221.6-221.6S733.6 389.6 733.6 512c0 122.4-99.2 221.6-221.6 221.6z"
                                            p-id="4991" fill="#ffffff"></path>
                                        <path d="M512 512m-136.3 0a136.3 136.3 0 1 0 272.6 0 136.3 136.3 0 1 0-272.6 0Z"
                                            p-id="4992" fill="#ffffff"></path>
                                    </svg>
                                    <span>2</span>
                                </div>
                            </footer>
                        </div>
                    </article>
                </div>
            </div>
        </section>



        <!-- 教程 -->
        <div class="teacher" id="teacher">
            <div class="teacher-head">
                <h2>学会使用代码编辑器</h2>
                <a href="text-button">现在开始</a>
            </div>
            <div class="wrapper">
                <ul class="editor">
                    <li>
                        <!-- details是HTML5中的一个标签，用于创建一个可展开/折叠的区域 -->
                        <details>
                            <!-- 用于定义标题 -->
                            <summary>支持您编写代码的方式</summary>
                            <p>The CodePen Editor is highly customizable. There is autocomplete and Emmet for speed and
                                accuracy. Plus you can set up smart defaults for starting new work.</p>
                        </details>
                    </li>
                    <li>
                        <!-- details是HTML5中的一个标签，用于创建一个可展开/折叠的区域 -->
                        <details>
                            <!-- 用于定义标题 -->
                            <summary>支持您编写代码的方式</summary>
                            <p>The CodePen Editor is highly customizable. There is autocomplete and Emmet for speed and
                                accuracy. Plus you can set up smart defaults for starting new work.</p>
                        </details>
                    </li>
                </ul>
                <!-- 上下切换图片动画 -->
                <div class="qietu">
                    <ul>
                        <li class="active">
                            <img
                                src="https://cpwebassets.codepen.io/assets/packs/editor-support-9cc33b6268c0a6c897033028084e1851.png">
                        </li>
                        <li>
                            <img
                                src="https://cpwebassets.codepen.io/assets/packs/editor-privacy-e542bc22ce324502eb727577083eeb61.png">
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- 动画模态框 -->
    <div class="animal-model" data-open='flase'>
        <div class="animal-model-content">
            <div class="model-dangban"></div>
            <article>
                <header>
                    <div class="model-title">
                        <h1>
                            <a href="">js实现3d轮播图</a>
                        </h1>
                        <a href="" class="user-img">
                            <img src="https://assets.codepen.io/2010481/internal/avatars/users/default.png?fit=crop&format=auto&height=80&version=1573529194&width=80"
                                alt="">
                        </a>
                        <a href="">时侍</a>
                    </div>
                    <div class="model-head-button">
                        <button class="love coment button login">
                            <svg t="1684114185946" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="1499" width="16" height="16">
                                <path
                                    d="M32 407.584A279.584 279.584 0 0 1 512 212.64a279.584 279.584 0 0 1 480 194.944 278.144 278.144 0 0 1-113.024 224.512L562.592 892.8a96 96 0 0 1-124.416-1.952L130.016 620.16A278.976 278.976 0 0 1 32 407.584z"
                                    p-id="1500" fill="#ffffff"></path>
                            </svg>
                        </button>
                        <a href="" class="button login">
                            <span>在编辑器显示</span>
                        </a>
                    </div>
                </header>
                <div>
                    <div class="model-show">
                        <nav>
                            <div class="coder-nav">
                                <button class="ant-btn"><span>html</span></button>
                                <button class="ant-btn">css</button>
                                <button class="ant-btn">js</button>
                            </div>
                        </nav>

                        <main class="show-iframe">
                            <div class="html-box box">
                                <pre><code><xmp>
                                    <div class="qietu">
                                        <ul>
                                            <li class="active">
                                                <img
                                                    src="https://cpwebassets.codepen.io/assets/packs/editor-support-9cc33b6268c0a6c897033028084e1851.png">
                                            </li>
                                            <li>
                                                <img
                                                    src="https://cpwebassets.codepen.io/assets/packs/editor-privacy-e542bc22ce324502eb727577083eeb61.png">
                                            </li>
                                        </ul>
                                    </div>
                                </xmp></code></pre>
                            </div>
                            <div class="css-box box">
                                <pre><code>.show-iframe .box{
                                    position: relative;
                                    display: none;
                                    background: #131417;
                                }
                                .show-iframe .box.active{
                                    display:block;
                                    height: 100%;
                                    width: 50%;
                                }</code></pre>
                            </div>
                            <div class="js-box box">
                                <pre><code>codeButton.forEach((button, index) => {
                                    button.addEventListener("click", function () {
                                        // 排他
                                        codeButton.forEach((btn) => {
                                            btn.classList.remove("active");
                                        });
                                        codeBox.forEach((box) => {
                                            box.classList.remove("active");
                                        });
                                        this.classList.toggle("active");
                                        codeBox[index].classList.toggle("active");
                                    });
                                });</code></pre>
                            </div>

                            <!-- 创意展示 -->
                            <div class="model-user-iframe loading zoom-1">
                                <iframe
                                    allow="accelerometer; camera; encrypted-media; geolocation; gyroscope; microphone; midi"
                                    allowfullscreen="allowfullscreen" allowpaymentrequest="true"
                                    allowtransparency="true"
                                    sandbox="allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"
                                    src="https://animpen.com/run/pen/JKfmKf?p=embed&_=1684314214478" frameborder="0"
                                    class="load"></iframe>
                            </div>
                        </main>

                        <footer>
                            <div class="code-footer-zhanwei"></div>
                            <div class="code-footer">
                                <div class="zoom">
                                    <button class="ant-btn">
                                        <span>1x</span>
                                    </button>
                                    <button class="ant-btn">
                                        <span>0.5x</span>
                                    </button>
                                    <button class="ant-btn">
                                        <span>0.25x</span>
                                    </button>
                                </div>
                                <div class="run">
                                    <button class="ant-btn">
                                        <span>运行</span>
                                    </button>
                                </div>
                            </div>
                        </footer>
                    </div>
                </div>
            </article>
        </div>
    </div>
</body>
<script>
    hljs.highlightAll();
</script>

</html>